import { cn } from "@/lib/util";
import { BaseProps, BaseChildrenProps } from "@/types/baseProps";
import React, { MouseEventHandler, ReactNode } from "react";
import SecondConfirm, { SecondConfirmProps } from "../../tool/SecondConfirm";
import { CloseCircleOutlined } from "@ant-design/icons";
interface Props extends BaseChildrenProps {
  /**点击了删除按钮的，弹出层点击了确定之后 */
  onDel: () => any;
  /**如果需要自定义图标及其位置 */
  icon?: ReactNode;
  /**对弹出组件的props */
  SecondConfirmProps?: Omit<SecondConfirmProps, "onOk">;
  /**点击事件 */
  onClick?: MouseEventHandler<HTMLDivElement>;
}
/**右上角会出现一个删除图表，点击了会问你是否删除 */
export default function DeleteBox({ children, className, style, onDel, SecondConfirmProps, icon, onClick }: Props) {
  return (
    <div className={cn("relative", className)} style={style} onClick={onClick}>
      {children}
      <SecondConfirm onOk={onDel} {...SecondConfirmProps}>
        {icon || <CloseCircleOutlined className="cursor-pointer absolute top-2 right-2" style={{ color: "red", fontSize: 18 }} />}
      </SecondConfirm>
    </div>
  );
}
